<template>

<view class="header">

<view @click="switchTopic"  class="text" :class="Index ? 'select':''">推荐</view>
<view @click="switchTopic" class="text" :class="!Index ? 'select':''">关注</view>

<view class="create" @click="createInvitation">
<uni-icons
                    type="plusempty"
                    color="#24edc2"
                    size="24"
                />
</view>
</view>



<Invitation v-if="loading"  :invitation-data="invitationData"
 @click-like="clickLike" @get-invitation-id="openComment"
 @get-detail="getDetail" @get-follower="getFollower"
 :DeleteInvitation="DeleteInvitation"
 ></Invitation>
 <uni-load-more v-if="!loading"  :status="loading ? '' :'loading' " />


<uni-popup

  ref="popup"
  type="bottom"
>
<view class="popups">

  <invitationComments ref="commentRef" :invitation_id="invitaionId" :comment_num="comment_num"  @get-replyid="getReplyId"></invitationComments>
  <Input :move="false" :placeholder="placeholder" :focus="focus" @get-focus="lowsefocus" @get-msg="sendMsg"></Input>
</view>
</uni-popup>
</template>

<script setup lang="ts">
import {http} from '@/utlis/http.ts'
import {ref,nextTick} from 'vue'
import Invitation from '@/components/invitation.vue'
import invitationComments from '@/components/invitationComments.vue';
import Input from '@/components/inputcomment.vue'

const commentRef = ref(null)
const focus = ref(false)
const placeholder = ref('')
const ftext = ref(false)
const DeleteInvitation = (index)=>{
  invitationData.value.splice(index,1)
}
const lowsefocus = ()=>{
  if(placeholder.value == '')ftext.value=false;
  else ftext.value=true;
  focus.value=false
  placeholder.value=''
}
//改变关注
const getFollower =(index)=>{
  invitationData.value[index].is_follow=!invitationData.value[index].is_follow
}
//获取parent_id
const replyId = ref('')
const replyIndex = ref('')
const getReplyId = (id,nickname,index)=>{
replyId.value = id
focus.value=true
replyIndex.value = index
placeholder.value=nickname
console.log(id,nickname);

}
//发送消息
const sendMsg = (data)=>{
  console.log(data);
  uni.request({
    url: 'invitation/create/comment/',
    data: {
      invitation_id:invitaionId.value,
      comment:data.comment,
      url:data.url?data.url.split('https://www.damer.asia/')[1]:'',
      parent_id:ftext.value ? replyId.value:""
    },
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    sslVerify: true,
    success: ({ data, statusCode, header }) => {
      console.log(data);
      if(data.code == 200){
          const temp=ftext.value ? replyIndex.value:-1
          console.log(temp);
          commentRef.value.addComment(data.data,temp)
      }
      else{
        uni.showToast({
          title: data.errmsg,
          icon: 'error',
          mask: true
        })
      }
      
    },
    fail: (error) => {}
    
  })
  focus.value=false
}
const loading = ref(false)
console.log('pp');
const getDetail=(index)=>{
  console.log(index);
  
  uni.navigateTo({ url: `/pages/invitation/invitation?invitation_id=${invitationData.value[index].id}` })
}
const onscrolltolower = (event)=>{
console.log('okpp',event);

}
//点赞
const clickLike = (index)=>{
invitationData.value[index].like_type=!invitationData.value[index].like_type
uni.request({
  url: 'invitation/like/',
  data: {invitation_id:invitationData.value[index].id},
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    if(data.code == 200){
      invitationData.value[index].like=invitationData.value[index].like_type ?invitationData.value[index].like+1:invitationData.value[index].like-1
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
    
  },
  fail: (error) => {}
})
}
const page_data=ref({
  page_num:1,
  page_size:10,
  page_count:0
})

//弹出层评论部分
const invitaionId =ref()
const comment_num = ref(0)
const openComment=(id,num)=>{
  invitaionId.value = id
  comment_num.value = num
  popup.value.open()
  console.log(id);
}
const popup = ref('')
const intailization = ()=>{

uni.request({
  url: 'invitation/recommend/',
  data: {
page_num:page_data.value.page_num,
page_size:page_data.value.page_size
  },
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    // console.log(data);
    if(data.code == 200){
      invitationData.value = data.data.list
      page_data.value.page_count = data.count
      loading.value = true
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
    
  },
  fail: (error) => {}
})



}
intailization()
const createInvitation= ()=>{
uni.navigateTo({url:'/pages/publishInvitation/publishInvitation'})
}
const Index = ref(true)
const switchTopic=()=>{
  page_data.value={
  page_num:1,
  page_size:10,
  page_count:0
}
  Index.value= !Index.value
  if(Index.value){
    uni.request({
  url: 'invitation/recommend/',
  data: {
page_num:page_data.value.page_num,
page_size:page_data.value.page_size
  },
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    // console.log(data);
    if(data.code == 200){
      invitationData.value = data.data.list
      page_data.value.page_count = data.count
      loading.value = true
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
    
  },
  fail: (error) => {}
})
  }
  else{
    uni.request({
  url: 'invitation/follow/',
  data: {
page_num:page_data.value.page_num,
page_size:page_data.value.page_size
  },
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    // console.log(data);
    if(data.code == 200){
      invitationData.value = data.data.list
      page_data.value.page_count = data.count
      loading.value = true
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
    
  },
  fail: (error) => {}
})
  }
}
const invitationData = ref([
     {
       id:1,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {
       id:2,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         }
       ],
       comment_num:100,
       like_type:false,
       is_follow:true,
       like:99,
     },
     {
       id:3,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:4,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:5,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:6,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {
       id:4,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:4,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:5,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:6,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:7,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:8,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:9,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {id:5,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
      
        
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
     {id:5,
       user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
       nikename:'离散',
       content:'大家快来打赏考了几分的案例啊健康快乐撒开了积分打算看了发大水了肌肤的啦，大家ask了发打算看了附近开了',
       create_time:'2020-10-12 12:00:31',
       is_img:true,
       url_list:[
         {
           id:1,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:2,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:3,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
         {
           id:4,
           url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080'
         },
      
        
       ],
       comment_num:100,
       like_type:true,
       is_follow:false,
       like:99,
     },
   ])
</script>

<style lang="scss" scoped>
.header{
  position: sticky;
  padding: 0 30.769rpx;
  z-index: 1;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 115.385rpx;
  color: rgba(51, 51, 51, 1);
  font-size: 34.615rpx;
  font-weight: 400;
  background-color: #fff;
  transition: .2s;
  .text{
    margin: 0px 25rpx;
  }
  .select{
    position: relative;
    color: rgba(51, 51, 51, 1);
    font-size:38.462rpx;
    font-weight: 600;
    &::after{
      position: absolute;
      bottom: -19.231rpx;
      left: 50%;
      content: ' ';
      width: 65.385rpx;
      height: 11.538rpx;
      transform: translateX(-32.692rpx);
      border-radius: 10px;
      background-color: #24edc2;
    }
  }

  .create{
    position: absolute;
    right: 30.769rpx;
    display: flex;
    justify-content: flex-end;
  }
}
.popups{
  width:100%;
  padding:10rpx 0 100px;
  height: 1000rpx;
  border-radius: 46rpx 46rpx 0 0;
  background-color: #fff;
}


</style>